/*
 * Copyright 2019 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* CSS 3 Mixins*/

@mixin box-shadow($top, $left, $blur, $color, $inset: false)
	@if $inset
		-webkit-box-shadow: inset $top $left $blur $color
		-moz-box-shadow: inset $top $left $blur $color
		box-shadow: inset $top $left $blur $color
	@else
		-webkit-box-shadow: $top $left $blur $color
		-moz-box-shadow: $top $left $blur $color
		box-shadow: $top $left $blur $color

@mixin -go-opacity($trans)
	opacity: $trans
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$trans * 100})"
	filter: alpha(opacity=$trans * 100)
	-khtml-opacity: $trans
	-moz-opacity: $trans

@mixin text-field
	display: inline-block
	outline: none
	text-decoration: none
	font: 14px/100% Arial, Helvetica, sans-serif
	padding: .5em
	text-shadow: 0 1px 1px rgba(0,0,0,.3)
	@include rounded()
	@include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2))

@mixin button($color: $red, $text_color: $white)
	display: inline-block
	outline: none
	cursor: pointer
	text-align: center
	text-decoration: none
	font: 14px/100% Arial, Helvetica, sans-serif
	padding: .5em 2em .55em
	text-shadow: 0 1px 1px rgba(0,0,0,.3)
	@include rounded()
	@include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2))
	color: $text_color !important
	font-weight: bold
	border: solid 1px darken($color, 18%)
	background: $color
	@include gradient(saturate($color, 15%), darken($color, 15%))
	&:hover
		text-decoration: none
		background: saturate($color, 10%)
		@include gradient(saturate($color, 5%), darken($color, 5%))
	&:active
		position: relative
		top: 1px
		color: saturate($color, 15%)
		@include gradient(saturate($color, 15%), lighten($color, 15%))

@mixin rounded($radius: 0.5em)
	-webkit-border-radius: $radius
	-moz-border-radius: $radius
	border-radius: $radius

@mixin gradient($from, $to)
	background: -webkit-gradient(linear, left top, left bottom, from($from), to($to))
	background: -moz-linear-gradient(top, $from, $to)
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}')*/
